import { Component, OnInit } from '@angular/core';
import * as _ from 'lodash'

@Component({
  selector: 'app-img-box',
  templateUrl: './img-box.component.html',
  styleUrls: ['./img-box.component.less']
})
export class ImgBoxComponent implements OnInit {
  // 初始化数据
  ngOnInit(): void {
    this.goodsArray.forEach((item:{name:string,price:string,src:string}) =>{
      if (item.name !== '新年美装低价钜献') {
        // 深拷贝
        this.rightGoodsArray.push(_.cloneDeep(item))
      }else{
        this.firstGoods = _.cloneDeep(item)
      }
    })
  }
  // 全部商品数组
  goodsArray:Array<{name:string,price:string,src:string}> = [
    {name:"新年美装低价钜献",price:"低至29元",src:"../../assets/images/img7.jpeg"},
    {name:"美邦轻薄羽绒服",price:"￥189元抢",src:"../../assets/images/img1.jpeg"},
    {name:"韩版中长款棉衣",price:"￥219元抢",src:"../../assets/images/img2.jpeg"},
    {name:"丝绒半身裙",price:"￥128元抢",src:"../../assets/images/img3.jpeg"},
    {name:"高领长款毛衣",price:"￥158元抢",src:"../../assets/images/img4.jpeg"},
    {name:"达芙妮显瘦高筒靴",price:"￥129元抢",src:"../../assets/images/img5.jpeg"},
    {name:"加绒长款卫衣",price:"￥181元抢",src:"../../assets/images/img6.jpeg"},
  ];
  // 较大图片显示的商品对象
  firstGoods:{name:string,price:string,src:string} = {
    name: '',
    price: '',
    src: ''
  }
  rightGoodsArray:Array<{name:string,price:string,src:string}>=[] //右边显示的商品数组
  // 从子组件获取商品名字，根据名字遍历数组删除所对应的对象
  DeleteGoods(name:string):void{
   this.goodsArray.map((item:{name:string,price:string,src:string},index) => {
    if (item.name === name) {
      this.goodsArray.splice(index,1)
    }
    })
    // 右边显示的商品数组进行删除
    this.rightGoodsArray.map((item:{name:string,price:string,src:string},index) => {
      if (item.name === name) {
        this.rightGoodsArray.splice(index,1)
      }
    })
  }
  // 点击左边较大图片商品"进入查看" 进行删除操作
  DeleteFirstGoods(name:string):void{
    this.firstGoods = {
      name: '',
      price: '',
      src: ''
    }
    // 从全部商品数组中去除较大图片显示的商品
    this.goodsArray.map((item:{name:string,price:string,src:string},index) => {
      if (item.name === name) {
        this.goodsArray.splice(index,1)
      }
    })
  }
}
